import React, { memo, useEffect } from 'react'

import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import WYThemeHeaderRcm from '@/components/theme-header-rcm'
import WYTopRanking from '@/components/top-ranking'
import { getTopListAction } from '../../store/actionCreators'

import {RankingWrapper} from './style'

export default memo(function WYRecommendRanking() {
  // redux hooks
  const { upRanking, newRanking, originRanking } = useSelector(state => ({
    upRanking: state.getIn(['recommend', 'upRanking']),
    newRanking: state.getIn(['recommend', 'newRanking']),
    originRanking: state.getIn(['recommend', 'originRanking'])
    
  }), shallowEqual)
  const dispatch = useDispatch()
  // other hooks
  useEffect(()=>{
    dispatch(getTopListAction(0))
    dispatch(getTopListAction(2))
    dispatch(getTopListAction(3))
  }, [dispatch])

    return (
        <RankingWrapper>
          <WYThemeHeaderRcm title="榜单"/>  
          <div className='tops'>
           < WYTopRanking info={upRanking}/>
           < WYTopRanking info={newRanking}/>
           < WYTopRanking info={originRanking}/>
          </div>
        </RankingWrapper>
    )
})
